import React from "react"
import queryString from 'query-string'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Meiricss from "./style/index.module.css"
import img1 from "./img/返回上一级.png"
import img2 from "./img/问题.png"
import img3 from "./img/返 回.png"
import img4 from "./img/播放暂停.png"
import img5 from "./img/多选.png"
import img6 from "./img/beijingtu.jpg"
import Videoplay from "./img/视频播放.png"
import More from "./img/更多.png"
class Meirituijian extends React.Component {
    state = {
        listgedan: [],
        scrolly: false
    }

    componentWillMount() {
        fetch('http://wjj97.com:3000/top/list?idx=0')
            .then(body => body.json())
            .then(res => {
                console.log(res.playlist.tracks[0]);
                console.log(res.playlist.tracks[0].al.picUrl);
                console.log(res.playlist.tracks[0].ar[0].name);
               for(var i=0;i<24;i++){
                   (this.state.listgedan).push(res.playlist.tracks[i])
                   this.setState({
                    // listgedan: res.playlist.tracks[i]
                   })
               }
               console.log( this.state.listgedan);
            })
    }
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }
    handleScroll = (e) => {
        if (window.pageYOffset >= 80) {
            this.setState({ scrolly: true })
        } else {
            this.setState({ scrolly: false })
        }
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/gen/Find")
    }
    sendId(songid){
        const playlistid=this.props.location.playlistid
        // const id=this.props.location.id
        // console.log(id)
        console.log(songid)
        console.log(playlistid)
  
        this.props.history.push({pathname:"/Findsong",songid,playlistid})
        
      }
    render() {
        let shijian = new Date();
        let tianshu = shijian.getDate();
        let yueshu = shijian.getMonth() + 1;
        let { listgedan, scrolly } = this.state;
        return (
            <div>
                <div className={Meiricss.div}>
                    <img onClick={this.img1fanhui.bind(this)} className={Meiricss.img1} src={img1} alt="" />
                    <img className={Meiricss.img2} src={img6} />
                    <img className={Meiricss.img3} src={img2} alt="" />
                    <span className={Meiricss.divspan1}>{tianshu}</span><span className={Meiricss.divspan2}>/{yueshu}</span>
                    <div className={Meiricss.divdiv}>
                        <div className={Meiricss.divdivday}>历史日推荐</div>
                        <div><img className={Meiricss.divdivimg1} src={img3} alt="" /></div>
                    </div>
                </div>
                <div className={Meiricss.div2}>
                    <div className={Meiricss.Danqu}>
                        <div className={Meiricss.playAll}>
                            <div className={Meiricss.left}>
                                <img src={img4} alt="" className={Meiricss.playImg} />
                                <p className={Meiricss.playP}>播放全部</p>
                            </div>
                            <div className={Meiricss.right}>
                                <img src={img5} alt="" className={Meiricss.selectImg} />
                                <p className={Meiricss.selectAll}>多选</p>
                            </div>
                        </div>
                        {listgedan.map((item, index) => {
                            return (
                                <div onClick={this.sendId.bind(this,item.id)} className={Meiricss.song} key={index}>
                                    <div className={Meiricss.listgedandiv}>
                                        <img className={Meiricss.listgedanimg} src={item.al.picUrl} alt="" />
                                    </div>
                                    <div className={Meiricss.songLeft}>
                                        <p className={Meiricss.name1}>{item.name}</p>
                                        <p className={Meiricss.name2}>{item.ar[0].name}-&nbsp;-{item.name}</p>
                                    </div>
                                    <div className={Meiricss.songRight}>
                                        <img src={Videoplay} alt="" className={Meiricss.videoImg} />
                                        <img src={More} alt="" className={Meiricss.moreImg} />
                                    </div>
                                </div>
                            )
                        })
                        }
                        <div className={Meiricss.song}></div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Meirituijian